<template>
  <div>
  <el-dialog
    v-if="visible"
    :close-on-click-modal="false"
    :visible.sync="visible">
  <div v-loading="loading" style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height:650px;overflow: auto;">
    <div style="height:590px;overflow: auto;">
    <el-form :inline="true" @keyup.enter.native="init()">
       <el-form-item>
        <span class="demonstration">权限赋予时间</span>
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions2"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="init()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
    ref="multipleTable"
    :data="dataList"
    tooltip-effect="dark"
     v-loading="dataListLoading"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <!-- <el-table-column
      type="selection"
      width="55">
    </el-table-column> -->
    <el-table-column
      :show-overflow-tooltip="true"
      prop="name"
      :label="$t('form.name')"
      >
    </el-table-column>
    <el-table-column
      :show-overflow-tooltip="true"
      prop="idNumber"
      label="身份证"
      >
    </el-table-column>
    <el-table-column
      :show-overflow-tooltip="true"
      prop="housingEstateText"
      label="所属小区"
      >
    </el-table-column>
    <el-table-column
      :show-overflow-tooltip="true"
      prop="createDate"
      label="赋予时间"
      >
    </el-table-column>
  </el-table>
  <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
  </div>
  <div style="margin-top: 20px;text-align:right">
    <el-button v-if="dataShow" type="primary" @click="submit()">下发</el-button>
    <!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
  </div>
  </div>
  </el-dialog>
  </div>
</template>

<script>
import { setTimeout } from "timers";
export default {
  data() {
    return {
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      dateValue: [new Date(new Date(new Date().toLocaleDateString()).getTime()), new Date(new Date(new Date().toLocaleDateString()).getTime() +
24 * 60 * 60 * 1000 -
1)],
      dataListLoading: false,
      visible: false,
      loading: false,
      deviceId: "",
      dataShow: false,
      superAdmin: sessionStorage.getItem("superAdmin"),
      personnelId: "",
      regionId: "",
      dataList: [],
      multipleSelection: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: []
    };
  },
  computed: {},
  // 引入的组件
  components: {},
  created() {},
  activated() {},
  methods: {
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.init(this.deviceId, this.ip);
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.init(this.deviceId, this.ip);
    },
    init(deviceId, ip) {
      this.dataListLoading = true;
      this.visible = true;
      if (this.dataList) {
        // 获取后端数据
        if (deviceId !== undefined) {
          this.deviceId = deviceId;
        }
        if (ip !== undefined) {
          this.ip = ip;
        }
        this.$http({
          url: `/dg-ic/ic/device/permission/personnel-device-list`,
          method: "get",
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            startDate: this.dateValue === null ? "" : this.dateValue[0],
            endDate: this.dateValue === null ? "" : this.dateValue[1],
            deviceId: this.deviceId,
            housingEstateId:
              sessionStorage.getItem("thiscommunityId") === "null"
                ? null
                : sessionStorage.getItem("thiscommunityId")
          })
        }).then(
          ({ data }) => {
            if (data && data.code === 0) {
              this.dataListLoading = false;
              this.dataList = data.data.list;
              this.totalPage = data.data.totalCount;
              if (this.dataList.length > 0) {
                this.dataShow = true;
              } else {
                this.dataShow = false;
              }
              this.dataList.forEach(row => {
                if (row.isSelected == true) {
                  setTimeout(() => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                  }, 100);
                }
              });
            } else {
              this.$message.error(data.msg);
              this.dataListLoading = false;
              this.dataList = [];
              this.totalPage = 0;
            }
          },
          error => {
            if (error.response.status === 403) {
              this.$message.error("你没有权限");
              this.dataListLoading = false;
            } else {
              this.$message.error("系统错误，请联系管理员");
              this.dataListLoading = false;
            }
          }
        );
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    submit() {
      this.loading = true;
      this.$http({
        url: `/dg-ic/ic/device/permission/sendMessage`,
        method: "post",
        data: this.$http.adornData({
          ip: this.ip,
          startDate: this.dateValue === null ? "" : this.dateValue[0],
          endDate: this.dateValue === null ? "" : this.dateValue[1],
        })
      }).then(({ data }) => {
        if (data && data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.loading = false;
              this.visible = false;
            }
          });
        } else {
          this.$message.error(data.msg);
          this.loading = false;
        }
      });

      /******************************************************************************** */
      // // 提交选中后的数据
      // var ids = this.multipleSelection.map(item => {
      //   return item.id;
      // });
      // this.$http({
      //   url: `/dg-ic/ic/device/permission/update`,
      //   method: "post",
      //   data: this.$http.adornData({
      //     housingEstateId:
      //       sessionStorage.getItem("thiscommunityId") === "null"
      //         ? null
      //         : sessionStorage.getItem("thiscommunityId"),
      //     deviceId: this.deviceId
      //   })
      // }).then(({ data }) => {
      //   if (data && data.code === 0) {
      //     // 推送消息给设备
      //     var ips = this.dataList.map(item => {
      //       return item.ip;
      //     });
      //     this.$http({
      //       url: `/dg-ic/ic/device/permission/sendMessage`,
      //       method: "post",
      //       data: this.$http.adornData({
      //         ips: ips
      //       })
      //     }).then(({ data }) => {
      //       if (data && data.code === 0) {
      //         this.$message({
      //           message: "操作成功",
      //           type: "success",
      //           duration: 1500,
      //           onClose: () => {
      //             this.loading = false;
      //             this.$emit("close", false);
      //           }
      //         });
      //       }else{
      //          this.$message.error(data.msg);
      //           this.loading = false;
      //       }
      //     });
      //   } else {
      //     this.$message.error(data.msg);
      //      this.loading = false;
      //   }
      // });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>



